<template>
	<view class="party">
		<view class="con" v-if="list && list.length">
			<view v-for="(item, index) in list" :key="index" class="item" @click="goInfo(item)">
				<view class="right">
					<view class="top">
						<view class="title ">{{ item.societiesName }}</view>
						<view class="desc">
							<u-icon name="bookmark" color="#333333" size="28"></u-icon>
							<text style="margin-left: 10rpx;">申请状态：{{ item.status }}</text>
						</view>
						<view class="desc">
							<u-icon name="clock" color="#333333" size="28"></u-icon>
							<text style="margin-left: 10rpx;">申请时间：{{ item.applyTime }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="con" v-else>
			<view class="nothing">暂无数据</view>
		</view>
	</view>
</template>

<script>
import { applyList } from '@/api/data'
import storage from "@/utils/storage";
export default {
	data() {
		return {
			list: [],
		}
	},
	onLoad() {
		this.applyList()
	},
	methods: {
		// 获取申请列表
		applyList() {
			applyList().then((res) => {
				if (res.code == '200') {
					this.list = res.data;
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
.party {
	box-sizing: border-box;
	width: 100%;
	background: #f4f4f4;
	height: 100vh;
	overflow: hidden;
	padding: 20rpx;

	.con {
		width: 100%;
		box-sizing: border-box;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.nothing {
			width: 100%;
			display: flex;
			background-color: #fff;
			padding: 20rpx 20rpx 0rpx 0;
			border-radius: 10rpx;
			border-top-right-radius: 30rpx !important;
			border-bottom-left-radius: 30rpx !important;
			margin-bottom: 40rpx;
			box-sizing: border-box;
			height: 500rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.item {
			width: 100%;
			display: flex;
			background-color: #fff;
			padding: 20rpx 20rpx 0rpx 0;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;

			.top {
				width: 100%;
				display: flex;
				flex-direction: column;

				.title {
					width: 100%;
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					margin-top: 14rpx;
				}

				.desc {
					width: 100%;
					font-size: 28rpx;
					color: #999;
					margin-bottom: 10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.line {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;

				.join {
					font-size: 24rpx !important;
					background-color: var(--greyLight);
					color: #999;
					border-radius: 10rpx;
					line-height: 2;
					padding: 0 25rpx;
					border-top-right-radius: 20rpx !important;
					border-bottom-left-radius: 20rpx !important;
				}

				.comm {
					background-color: var(--projectCompareColor);
					color: #fff;
				}



				.users {
					flex: 1;
					display: flex;
					align-items: center;
				}

				.pic-group {
					display: flex;
					padding: 0 10rpx 0 0rpx;
					align-items: center;
				}

				.pic-group .pic {
					width: 48rpx !important;
					height: 48rpx !important;
					margin-left: -20rpx;
					border: 50% solid #fff;
					vertical-align: middle;

					&:first-child {
						margin-left: 0rpx;
					}
				}

				.num {
					font-size: 24rpx;
					color: #bbb;
				}
			}
		}

	}
}
</style>
